<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">	
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../css/oksub.css">
	<script type="text/javascript" src="../lib/loading/okLoading.js"></script>
	<style type="text/css">
	
.layui-form-radio i {
  top: 0;
  width: 16px;
  height: 16px;
  line-height: 16px;
  border: 1px solid #d2d2d2;
  font-size: 12px;
  border-radius: 2px;
  background-color: #fff;
  color: #fff !important;
}
.layui-form-radioed i {
  position: relative;
  width: 18px;
  height: 18px;
  border-style: solid;
  background-color: #6A8BF5;
  color: #6A8BF5 !important;
}
/* 使用伪类画选中的对号 */
.layui-form-radioed i::after, .layui-form-radioed i::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 5px;
  display: block;
  width: 12px;
  height: 2px;
  border-radius: 4px;
  background-color: #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.layui-form-radioed i::before {
  position: absolute;
  top: 10px;
  left: 2px;
  width: 7px;
  transform: rotate(-135deg);
}
.layui-form-item .layui-input-inline{
 width:600px !important;;
}

.layui-form-radio *{
 font-size:50px
}

	</style>
</head>
<body>
<div class="ok-body">
	<!--form表单-->
	<form class="layui-form layui-form-pane ok-form">
		<div class="layui-form-item">		
			<div class="layui-input-inline">
				  <input type="radio" name="worktype" lay-filter="worktype" value="1" title="上班打卡" checked >
                  <input type="radio" name="worktype" lay-filter="worktype" value="2" title="下班打卡" >
			</div>
			<div class="layui-input-inline">
				 <h1 style="color:red" >請選擇實際的  上/下班方式，然後直接拍卡</h1>
			</div>
		</div>	
	</form>
	 <table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
</div>
<!--js逻辑-->
<script src="../lib/layui/layui.js"></script>
<script src="../js/okform.js"></script>
<script>
       
    var worktype = "1";    
	layui.use(["element", "form","jquery","table", "laydate", "okLayer", "okUtils", "okMock"], function () {
		let form = layui.form;
		let laydate = layui.laydate;
		let okLayer = layui.okLayer;
		let okUtils = layui.okUtils;
		let table = layui.table;
		let okMock = layui.okMock;
		let $ = layui.jquery;
		
		okLoading.close();		
	
		
		form.on('radio(worktype)', function(data){
		    worktype = data.value;		  
		})
		
		var  searchcondition =JSON.stringify({ TIMESTAMP :$.now()});
		let stable = table.render({
			elem: '#tableId',
			url: "../AttendancdServlet?method=getListByCardNum",	
			toolbar: true,
			defaultToolbar: false,
			size: "sm",
			page:false,
			limit:100,	
			toolbar: "#toolbarTpl",		
			where: {CARDNUM: 1},
			cols: [[			
			    {title: "XUHAO", type :"numbers", width: 160},			
				{field: "RealName", title: "姓名", width: 200},
				{field: "S_ATTEND_TIME", title: "打卡時間", width: 200},
				{field: "WORK_TYPE", title: "打卡類型", width: 200,templet: function(d){ 
					if(d.WORK_TYPE == 1){
						return "上班";
					}else if(d.WORK_TYPE == 2){
						return "下班";
					}
				}},	
				{field: "CREATETYPE", title: "打卡方式",templet: function(d){ 
					if(d.CREATETYPE == 2){
						return "拍卡";
					}else if(d.CREATETYPE == 1){
						return "登录";
					}
				}},	
				{title: "操作", width: 100, align: "center", fixed: "right", templet: "#operationTpl"}
			]],			
			done: function (res, curr, count) {
				console.info(res, curr, count);
			}
		});
		table.on("toolbar(tableFilter)", function (obj) {
			switch (obj.event) {
				case "clean":
					clean();
					break;
				
			}
		});
		
		function clean(){
			  stable.reload({
					where: {CARDNUM: 0},
					page: {curr: 1}
				});
		}
		
		var cardnum = "";
		$('body').bind('keydown', function(event) {
		  　　if (event.keyCode == "13") { 
		       okUtils.ajax("AttendancdServlet?method=save", "get", {CARDNUM: cardnum,WORK_TYPE: worktype}, true).done(function (response) {	
		          
		           stable.reload({
						where: {CARDNUM: cardnum},
						page: {curr: 1}
					});
		           cardnum = "";
		           
				}).fail(function (error) {
					console.log(error);
				    cardnum = "";
				});
		  　　}else{
		      var ieKey=event.keyCode;//获得键值，数字形式的
		      var realkey=String.fromCharCode(ieKey) //将数字形式的键值转化为真实的按键
		      cardnum = cardnum + realkey;      
		  　　}
		    return false;
		  });
		
	
	});
</script>
<!-- 行工具栏模板 -->
<script type="text/html" id="toolbarTpl">
	<div class="layui-btn-container">
		<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="clean">屏蔽数据</button>	
	</div>
</script>

</body>
</html>
